<template>
  <div>
    <div class="headButton">
      <span class="title">{{'项目计划-'}}<a @click.prevent="goBack" class="back-class" href="#">项目详情</a></span>
      <div>
        <el-button style="margin-left:10px" type="success" icon="el-icon-circle-plus-outline" size="small"
                   @click="add" v-if="btnPermissionUtil.getBtnbtnPermission('task-add')">新计划
        </el-button>
      </div>
    </div>
    <search-component :colum="colum" :formValue="formValue" class="search"
                      @search="search" @reset="reset" ref="search">
    </search-component>
    <vxe-grid
        border
        context-menu
        highlight-hover-row
        show-overflow
        resizable
        :scroll-y="{gt: -1}"
        :data="tableData"
        :toolbar-config="{ custom: true, slots: { buttons: 'toolbar_buttons' } }"
        :pager-config="pagerConfig"
        @cell-dblclick="cellDblclick"
        class="task-table-style"
        :loading="loading"
        @page-change="pageChangeChange">
      <vxe-table-column field="Id" title="编号" width="180" sortable></vxe-table-column>
      <vxe-table-column field="Vesionno" title="版本号" width="180" sortable></vxe-table-column>
      <vxe-table-column field="Status" title="状态" width="90" sortable align="center">
        <template v-slot="{ row }">
          <span>{{ statusFilterOptions(row.Status, 'TASK_STATUS') }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Title" title="标题" min-width="180" sortable>
        <template v-slot="{ row }">
          <a class="link-name" @click.prevent="edit(row)" :href="linkName(row)"><span>{{row.Title}}</span></a>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Createname" title="创建人" width="100" sortable></vxe-table-column>
      <vxe-table-column field="Created" title="创建时间" width="150" sortable align="center">
        <template v-slot="{ row }">
          <span>{{ formatDatetime(row.Created) }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Started" title="预计开始时间" width="150" sortable align="center">
        <template v-slot="{ row }">
          <span>{{ formatDatetime(row.Started) }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Ended" title="预计结束时间" width="150" sortable align="center">
        <template v-slot="{ row }">
          <span>{{ formatDatetime(row.Ended) }}</span>
        </template>
      </vxe-table-column>
<!--      <vxe-table-column field="Title" title="修改时间" width="150" sortable align="center">-->
<!--        <template v-slot="{ row }">-->
<!--          <span>{{ formatDatetime(row.Created) }}</span>-->
<!--        </template>-->
<!--      </vxe-table-column>-->
      <vxe-table-column field="opear" title="操作" width="80px" align="center" fixed="right">
        <template v-slot="{ row }">
          <vxe-button type="text" circle icon="el-icon-edit-outline" @click="assigned(row)" size="small" title="编辑"></vxe-button>
<!--          <vxe-button type="text" circle icon="el-icon-circle-plus-outline" @click="addChildTask(row)" size="small" title="添加子任务"></vxe-button>-->
        </template>
      </vxe-table-column>
    </vxe-grid>
    <plan-add :visible.sync="addVisible" title="计划新增" :formData="addFormData" @search="search"></plan-add>
  </div>
</template>

<script>
import searchComponent from "@/components/element/layoutComponents/searchFrom/searchComponent.vue";
import SelectProjectModule from "@/components/element/select/SelectProjectModule";
import DictionarySelect from "@/components/element/DictionarySelect";
import PlanAdd from "@/page/ProjectManage/modules/planModule/PlanAdd";
import projectPlanApi from "@/api/projectPlanApi";
import { mapGetters } from "vuex";
import * as format from "@/filters";
export default {
  name: "Plan",
  components: {
    searchComponent,
    PlanAdd
  },
  computed: {
    ...mapGetters(['dictionary']),
    statusList() {
      return (DictTypeCode) => {
        return this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
      }
    },
    statusFilterOptions() {
      return (cellValue, DictTypeCode) => {
        let filter = this.statusList(DictTypeCode).filter(it => it.DictId === cellValue.toString())
        if (filter.length > 0) {
          return filter[0].DictName
        }
        return ''
      }
    },
    linkName () {
      return (row) => {
        if (row) {
          let hp = window.location.protocol
          let host = window.location.host
          return `${hp}//${host}/view/project/task/${row.Id}`
        }
        return '#'
      }
    },
    formatDatetime() {
      return (val, v='yyyy-MM-dd hh:mm') => {
        let w = val
        if (val.toString().length !== 13) {
          w = w * 1000
        }
        let a = format.formatDatetime(w, v)
        if (a.indexOf('1970') >= 0) {
          return ''
        } else {
          return a
        }
      }
    }
  },
  data () {
    return {
      addVisible: false,
      addFormData: {},
      tableData: [],
      tabPosition: '',
      loading: false,
      pagerConfig: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pagerCount: 7,
        pageSizes: [10, 15, 20, 50, 100]
      },
      formValue: {
        p: 1,
        pageoffset: 15
      },
      colum: [
        {
          placeholder: '请选择状态',
          prop: 'type',
          size: 'small',
          dictTypeCode: 'TASK_STATUS',
          componentName: DictionarySelect,
          value: 'type',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请输入版本号',
          prop: 'vesionno',
          size: 'small',
          componentName: 'vxe-input',
          value: 'vesionno',
          clearable: true,
          ref: 'vesionno',
          show: true,
          multiple: false,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择预计开始时间',
          prop: 'createStarted',
          size: 'small',
          componentName: 'el-date-picker',
          value: 'createStarted',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择预计结束时间',
          prop: 'createEnd',
          size: 'small',
          componentName: 'el-date-picker',
          value: 'createEnd',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请输入标题',
          prop: 'tasktno',
          size: 'small',
          componentName: 'vxe-input',
          type: 'integer',
          min: 0,
          value: 'tasktno',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请输入计划编号',
          prop: 'tasktno',
          size: 'small',
          componentName: 'vxe-input',
          type: 'integer',
          min: 0,
          value: 'tasktno',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
      ]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    // 单元格双击
    cellDblclick ({ row, rowIndex, column, columnIndex }) {
      this.$router.push(`/view/project/task/${row.Id}`)
    },
    // 编辑
    assigned (row) {
      this.addFormData = row
      this.addVisible = true
    },
    // 点击标题
    edit (row) {
      this.$router.push(`/view/project/task/${row.Id}`)
    },
    // 新增计划
    add () {
      this.addVisible = true
    },
    // 返回项目详情
    goBack () {
      this.$router.push(`/view/project/details/${this.$route.params.id}`)
    },
    // 查询项修改
    queryChange () {
    },
    // 查询
    search () {
      if (this.$route.params.id) {
        let query1 = Object.assign({id: this.$route.params.id}, this.formValue)
        let query = JSON.parse(JSON.stringify(query1))
        // if (query.createStarted) {
        //   query.createStarted = query.createStarted / 1000
        // }
        // if (query.createEnd) {
        //   query.createEnd = query.createEnd / 1000
        // }
        this.loading = true
        projectPlanApi.getPage(query1).then(res => {
          if (res && res.Needs) {
            this.tableData = res.Needs
          }
        }).finally(_ => {
          this.loading = false
        })
      } else {
        this.$message.error('获取计划信息失败')
      }
    },
    pageChangeChange(pageConfig) {
      this.formValue.p = pageConfig.currentPage
      this.pagerConfig.currentPage = pageConfig.currentPage
      this.formValue.pageoffset = pageConfig.pageSize
      this.pagerConfig.pageSize = pageConfig.pageSize
      this.search()
    },
    // 重置
    reset () {
    },
    // 添加子计划
    addChildTask (row) {
      this.addFormData = row
      this.addVisible = true
    }
  }
}
</script>

<style scoped>
.headButton {
  display: flex;
  justify-content: space-between;
}
.headButton >>> .title {
  float: left;
  font-width: normal;
  font-size: 20px;
}

.link-name {
  color: #65CEA7;
}

</style>
